<template>
  <div class="records7add">
    <div class="top">
      <el-link type="primary" @click="goback"
        ><el-icon><Back /></el-icon>返回</el-link
      >
    </div>
    <div class="body">
      <div class="bodyleft">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title" />
          </el-form-item>
          <el-form-item label="描述" prop="describe">
            <el-input v-model="ruleForm.describe" />
          </el-form-item>
          <el-form-item label="封面图片">
            <el-upload
              :file-list="fileList"
              class="upload-demo"
              :limit="1"
              :auto-upload="false"
              :action="uploadurl"
              :show-file-list="true"
              :on-change="handleChange"
            >
              <el-button type="primary"
                ><el-icon><UploadFilled /></el-icon>Upload</el-button
              >
            </el-upload>

          </el-form-item>
          <el-form-item label="上传文件">
            <el-upload
              :file-list="fileList"
              class="upload-demo"
              :limit="1"
              :auto-upload="false"
              :action="uploadurl"
              :show-file-list="true"
              :on-change="handleChange1"
            >
              <el-button type="primary"
                ><el-icon><UploadFilled /></el-icon>文件</el-button
              >
            </el-upload>

          </el-form-item>
          <el-form-item label="详细信息" prop="desc">
            <el-input v-model="ruleForm.desc" type="textarea" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"> 添加 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="bodyright">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon><Plus /></el-icon>

          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <el-icon><Download /></el-icon>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import { reactive, ref } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import type { UploadRawFile, UploadFile, FormInstance, Action, FormRules, UploadProps } from 'element-plus'
// import axios from 'axios'
const goback = () => {
  router.push('/fkmmanage/records/7')
}
const imgs = ref('http://www.eshareedu.cn/fkm/upload/')
const uploadurl = ref('http://www.eshareedu.cn/fkm/api/upload/add')
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  title: '',
  describe: '',
  desc: ''
})
const fileList = ref<UploadFile[]>([])
const fileList1 = ref<UploadFile[]>([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const rules = reactive<FormRules>({
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' },
    { min: 1, max: 10, message: '文字因在1到10个之间', trigger: 'blur' }
  ],
  describe: [
    { required: true, message: '请输入描述', trigger: 'blur' },
    { min: 1, max: 30, message: '文字因在1到30个之间', trigger: 'blur' }
  ],
  desc: [{ required: true, message: '请输入详细信息', trigger: 'blur' }]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const handleChange = (file: any, filelist: any) => {
      console.log(fileList);
      
}


const handleChange1: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
  console.log(uploadFiles)
}

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}

</script>

<style scoped lang="less">
@import '../../../assets/css/About Fkm/recordsadd.less';
</style>
